import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { NavBar, Card, Tag, IndexBar, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

const City = () => {
    const nav= useNavigate()
    const [cityList, setCityList] = useState([])
    const [thoList, setThoList] = useState([])
    const getCity = async () => {
        const res = await axios.get("/api/city")
        console.log(res.data.data);
        setCityList(res.data.data.cityList)
        setThoList(res.data.data.hotCities)
    }
    useEffect(() => {
        getCity()
    }, [])

    const getData=(city)=>{
        console.log(city);
     nav("/",city)
    }
    return (
        <div>
            <NavBar>城市选择</NavBar>
            <div style={{ margin: 10 }}>
                <Card title="热门城市" >
                    {
                        thoList.length > 0 && thoList.map((v, i) => {
                            return <Tag key={i}>{v.name}</Tag>
                        })
                    }
                </Card>
            </div>

            <Card title="城市列表">
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {cityList.length > 0 && cityList.map((v) => {
                            return (
                                <IndexBar.Panel
                                    index={v.title}
                                    title={`${v.title}`}
                                    key={`${v.title}`}
                                >
                                    <List>
                                        {v.citys.map((item, index) => (
                                            <List.Item key={index} onClick={()=> getData(item.name)}>{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </Card>
        </div>
    )
}

export default City
